<template>
    <div>
        <el-dialog v-model="prop.isShow" :title="prop.isAdd ? '添加管理员' : '编辑管理员'" :before-close="close">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">

                <el-form-item label="所属角色" prop="roleid">
                    <el-select v-model="form.roleid" placeholder="请选择">
                        <el-option v-for="item in store.getters['role/getRole']" :key="item.id" :label="item.rolename"
                            :value="item.id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>

                <el-form-item label="用户密码">
                    <el-input v-model="form.password" />
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2" />
                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="submit(formRef)">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits,defineExpose, ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from "element-plus"
import { useStore } from 'vuex';
import { useradd, useredit, userinfo } from '@/request/api';
let store = useStore()
let emit = defineEmits(["close"])
let formRef = ref()

let form = ref({
    roleid: null,
    username: "",
    password: "",
    status: 2,
    uid:0
})

let prop = defineProps({
    isShow: Boolean,
    isAdd: Boolean,
})

//方法
let close = () => {
    emit("close")
    form.value = {
        roleid: null,
        username: "",
        password: "",
        status: 2,
        uid:0
    }
    formRef.value.resetFields();
}

let submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((val) => {
        if (val) {
            if (prop.isAdd) {
                useradd(form.value).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        get()
                        close()
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    }else{
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }

                })
            }else{
                useredit(form.value).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        get()
                        close()
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    }else{
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }

                })

            }
        }
    })

}

let lookup = (uid:number) =>{
   userinfo({uid}).then((res:any)=>{
    form.value = res.list
    form.value.password = ""
    
   })
   
}

let get = () => {
    store.dispatch("role/getRoleAction")
    store.dispatch("user/getUserAction")
    store.dispatch('user/getUserCount')
}

get()

//定义 rules规则
let rules = reactive<FormRules>({
    username: [
        { required: true, message: "请输入用户名称", trigger: "blur" },
        { min: 2, max: 6, message: "Length should be 2 to 6", trigger: "blur" },
    ],
    roleid: [
        {
            required: true,
            message: "请选择所属角色",
            trigger: "change",
        },
    ],
});

defineExpose({
    lookup
})

</script>